<template>
  <div class="SideBar">
    <!-- 内容区域 -->
    <div class="content">
      <!-- 热门推荐 -->
      <div class="contents recommend">
        <div class="title">
          <div class="text">为你推荐</div>
          <div class="button">
            <div class="retry"></div>
            <div>换一批</div>
          </div>
        </div>
        <!-- 1 -->
        <div class="comic-list">
          <div class="comic-item" v-for="item in comic" :key="item.id">
            <router-link to="1">
              <div class="cover-button">
                <div class="cover">
                  <img :src="item.idView" />
                </div>
                <div class="titles">
                  <div class="text">{{ item.name }}</div>
                  <span class="tags">{{ item.sort }}</span>
                </div>
              </div>
            </router-link>
          </div>
        </div>
        <!-- 2 -->
        <div class="comic-list">
          <div class="comic-item" v-for="item in comic" :key="item.id">
            <router-link to="1">
              <div class="cover-button">
                <div class="cover">
                  <img :src="item.idView" />
                </div>
                <div class="titles">
                  <div class="text">{{ item.name }}</div>
                  <span class="tags">{{ item.sort }}</span>
                </div>
              </div>
            </router-link>
          </div>
        </div>
      </div>
      <!-- 热门速递 -->
      <div class="contents Courier">
        <div class="header">
          <div class="title" style="min-width: 1210px; max-width: 1160px">
            <div class="text">热门速递</div>
            <div class="tab app-button active">二次元养老院</div>
            <div class="tab app-button">9.0以上佳作静品</div>
            <div class="divider"></div>
            <div class="button">
              <div class="retry"></div>
              <div>换一批</div>
            </div>
          </div>
        </div>
        <!-- 1 -->
        <div class="row">
          <div
            class="comic-item"
            style="max-width: 278px"
            v-for="item in courier"
            :key="item.id"
          >
            <router-link to="1">
              <div class="cover-container">
                <div class="cover">
                  <img :src="item.idView" />
                </div>
                <div class="titles">
                  <div class="text">{{ item.name }}</div>
                  <span class="tags">{{ item.sort }}</span>
                </div>
              </div>
            </router-link>
          </div>
        </div>
        <!-- 2 -->
        <div class="row">
          <div
            class="comic-item"
            style="max-width: 278px"
            v-for="item in courier"
            :key="item.id"
          >
            <router-link to="1">
              <div class="cover-container">
                <div class="cover">
                  <img :src="item.idView" />
                </div>
                <div class="titles">
                  <div class="text">{{ item.name }}</div>
                  <span class="tags">{{ item.sort }}</span>
                </div>
              </div>
            </router-link>
          </div>
        </div>
      </div>
      <!-- 都市生活 -->
      <div class="contents container">
        <div class="title">
          <div class="text">都市生活</div>
          <div class="button">
            <div class="retry"></div>
            <div>换一批</div>
          </div>
        </div>
        <!-- 1 -->
        <div class="comic-list">
          <div class="comic-item" v-for="item in comic" :key="item.id">
            <router-link to="1">
              <div class="cover-button">
                <div class="cover">
                  <img :src="item.idView" />
                </div>
                <div class="titles">
                  <div class="text">{{ item.name }}</div>
                  <span class="tags">{{ item.sort }}</span>
                </div>
              </div>
            </router-link>
          </div>
        </div>
      </div>
      <!-- 奇幻异世界 -->
      <div class="contents container">
        <div class="title">
          <div class="text">奇幻异世界</div>
          <div class="button">
            <div class="retry"></div>
            <div>换一批</div>
          </div>
        </div>
        <!-- 1 -->
        <div class="comic-list">
          <div class="comic-item" v-for="item in comic" :key="item.id">
            <router-link to="1">
              <div class="cover-button">
                <div class="cover">
                  <img :src="item.idView" />
                </div>
                <div class="titles">
                  <div class="text">{{ item.name }}</div>
                  <span class="tags">{{ item.sort }}</span>
                </div>
              </div>
            </router-link>
          </div>
        </div>
      </div>
      <!-- 古风恋爱 -->
      <div class="contents container">
        <div class="title">
          <div class="text">古风恋爱</div>
          <div class="button">
            <div class="retry"></div>
            <div>换一批</div>
          </div>
        </div>
        <!-- 1 -->
        <div class="comic-list">
          <div class="comic-item" v-for="item in comic" :key="item.id">
            <router-link to="1">
              <div class="cover-button">
                <div class="cover">
                  <img :src="item.idView" />
                </div>
                <div class="titles">
                  <div class="text">{{ item.name }}</div>
                  <span class="tags">{{ item.sort }}</span>
                </div>
              </div>
            </router-link>
          </div>
        </div>
      </div>
    </div>
    <!-- 导航区域 -->
    <div class="navs-s">
      <ul class="navs">
        <li :class="{ active: active === 0 }" @click="scrollTo(0)">为你推荐</li>
        <li :class="{ active: active === 1 }" @click="scrollTo(1)">热门速递</li>
        <li :class="{ active: active === 2 }" @click="scrollTo(2)">都市生活</li>
        <li :class="{ active: active === 3 }" @click="scrollTo(3)">奇幻异界</li>
        <li :class="{ active: active === 4 }" @click="scrollTo(4)">古风恋爱</li>
        <div class="Arrow">
          <img src="./imgs/arrow.png" alt="" />
        </div>
      </ul>
    </div>
  </div>
</template>

<script>
export default {
  name: "SideBar",
  props: {},
  data() {
    return {
      active: 0, // 当前激活的导航索引
      comic: [
        {
          id: 0,
          idView: require("./imgs/wntj-01.jpg"),
          name: "我独盗墓",
          sort: "都市",
        },
        {
          id: 1,
          idView: require("./imgs/wntj-02.jpg"),
          name: "双胞胎兄妹的父皇是宠娃狂魔",
          sort: "西幻",
        },
        {
          id: 2,
          idView: require("./imgs/wntj-03.jpg"),
          name: "爷就是开挂少女",
          sort: "古风",
        },
        {
          id: 3,
          idView: require("./imgs/wntj-04.jpg"),
          name: "从1级开始的异世界骑士",
          sort: "游戏竞技",
        },
        {
          id: 4,
          idView: require("./imgs/wntj-05.jpg"),
          name: "骷髅奶爸",
          sort: "西幻",
        },
        {
          id: 5,
          idView: require("./imgs/wntj-06.jpg"),
          name: "修罗武神",
          sort: "玄幻",
        },
      ],
      courier: [
        {
          id: 0,
          idView: require("./imgs/rmsd-01.png"),
          name: "我独排球少年!!",
          sort: "游戏竞技",
        },
        {
          id: 1,
          idView: require("./imgs/rmsd-02.png"),
          name: "斗罗大陆",
          sort: "玄幻",
        },
        {
          id: 2,
          idView: require("./imgs/rmsd-3.jpg"),
          name: "猫之茗",
          sort: "古风",
        },
        {
          id: 3,
          idView: require("./imgs/rmsd-04.png"),
          name: "偷星九月天",
          sort: "都市",
        },
      ],
    };
  },
  mounted() {
    // 监听滚动事件
    window.addEventListener("scroll", this.onScroll, false);
  },
  destroy() {
    // 必须移除监听器，不然当该vue组件被销毁了，监听器还在就会出错
    window.removeEventListener("scroll", this.onScroll);
  },
  methods: {
    // 滚动监听器
    onScroll() {
      // 获取所有锚点元素
      const navContents = document.querySelectorAll(".contents");
      // 所有锚点元素的 offsetTop
      const offsetTopArr = [];
      navContents.forEach((item) => {
        offsetTopArr.push(item.offsetTop);
      });
      // 获取当前文档流的 scrollTop
      const scrollTop =
        document.documentElement.scrollTop || document.body.scrollTop;
      // 定义当前点亮的导航下标
      let navIndex = 0;
      for (let n = 0; n < offsetTopArr.length; n++) {
        // 如果 scrollTop 大于等于第n个元素的 offsetTop 则说明 n-1 的内容已经完全不可见
        // 那么此时导航索引就应该是n了
        if (scrollTop >= offsetTopArr[n]) {
          navIndex = n;
        }

        if (
          scrollTop + document.documentElement.clientHeight ===
          document.documentElement.scrollHeight
        ) {
          navIndex = offsetTopArr.length - 1;
        }
      }
      this.active = navIndex;
    },
    // 跳转到指定索引的元素
    scrollTo(index) {
      // 获取目标的 offsetTop
      // css选择器是从 1 开始计数，我们是从 0 开始，所以要 +1
      const targetOffsetTop = document.querySelector(
        `.contents div(${index + 1})`
      ).offsetTop;
      // 获取当前 offsetTop
      let scrollTop =
        document.documentElement.scrollTop || document.body.scrollTop;
      // 定义一次跳 50 个像素，数字越大跳得越快，但是会有掉帧得感觉
      const STEP = 40;
      // 判断是往下滑还是往上滑
      if (scrollTop > targetOffsetTop) {
        // 往上滑
        smoothUp();
      } else {
        // 往下滑
        smoothDown();
      }
      // 定义往下滑函数
      function smoothDown() {
        // 如果当前 scrollTop 小于 targetOffsetTop 说明视口还没滑到指定位置
        if (scrollTop < targetOffsetTop) {
          // 如果和目标相差距离大于等于 STEP 就跳 STEP
          // 否则直接跳到目标点，目标是为了防止跳过了。
          if (targetOffsetTop - scrollTop >= STEP) {
            scrollTop += STEP;
          } else {
            scrollTop = targetOffsetTop;
          }
          document.body.scrollTop = scrollTop;
          document.documentElement.scrollTop = scrollTop;
          requestAnimationFrame(smoothDown);
        }
      }
      // 定义往上滑函数
      function smoothUp() {
        if (scrollTop > targetOffsetTop) {
          if (scrollTop - targetOffsetTop >= STEP) {
            scrollTop -= STEP;
          } else {
            scrollTop = targetOffsetTop;
          }
          document.SideBar.scrollTop = scrollTop;
          document.documentElement.scrollTop = scrollTop;
          requestAnimationFrame(smoothUp);
        }
      }
    },
  },
};
</script>

<style lang="less" scoped>
/* 内容区的样式 */
.SideBar {
  // width: 1260px;
  height: 100%;
  margin: 0 auto;
  margin-bottom: 10px;
  padding: 10px;
  background-color: #fff;
  position: relative;
  /* border-bottom: 1px solid #dcdcdc; */
  display: flex;
  justify-content: space-between;
  // border: 1px solid mediumblue;
}
.content {
  min-width: 1210px;
  max-width: 1160px;
  width: 80%;
  margin: auto;
  padding-bottom: 32px;
  // border: 1px solid darkblue;
}
.header {
  padding: 43px 0 20px;
  display: flex;
  align-items: center;
}
.title {
  padding: 60px 0 16px;
  display: flex;
  align-items: center;
  color: rgba(0, 0, 0, 0.87);
}
.title .text {
  font-size: 32px;
  line-height: 45px;
  flex: 1;
}
.tab {
  font-size: 14px;
  line-height: 20px;
  margin: 10px 0 0 28px;
  color: rgba(0, 0, 0, 0.56);
}

.app-button {
  background-color: transparent;
  border: 0;
  transform-origin: center center;
  cursor: pointer;
}

.tab.active {
  color: #32aaff !important;
}
.tab.active::after {
  content: "";
  width: 8px;
  height: 3px;
  border-radius: 1px;
  background-color: #32aaff;
  bottom: -3px;
  left: 50%;
  transform: translate(-50%);
}
.divider {
  flex: 5;
}
.button {
  height: 34px;
  width: 90px;
  background-color: rgba(50, 170, 255, 0.16);
  border-radius: 20px;
  font-size: 14px;
  display: flex;
  justify-content: center;
  align-items: center;
  line-height: 1;
  color: #32aaff;
}
.retry {
  margin-right: 4px;
  width: 12px;
  height: 12px;
  background-image: url();
  background-size: contain;
  background-repeat: no-repeat;
}
.comic-list {
  display: flex;
  flex-flow: row;
  justify-content: space-between;
  margin: 0 -5px;
}
.comic-list .comic-item {
  max-width: 180px;
  padding: 0 5px 24px;
  flex: 1;
}
.comic-list .comic-item .cover-button {
  background-color: transparent;
  border: 0;
  transform-origin: center center;
  cursor: pointer;
}
.cover {
  width: 100%;
  background-size: cover;
  background-repeat: no-repeat;
  background-position: 50%;
  border-radius: 2px;
}
.cover img {
  width: 100%;
}
.cover-button .titles {
  margin: 10px 0 5px;
  display: flex;
  align-items: center;
}
.cover-button .text {
  flex: 1;
  width: 0;
  font-size: 18px;
  line-height: 25px;
  color: rgba(0, 0, 0, 0.87);
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.cover-button .tags {
  font-size: 13px;
  line-height: 18px;
  color: #999;
  padding: 2px 0;
  display: inline-block;
}
.titles {
  margin: 10px 0 5px;
  display: flex;
  flex-direction: row;
  align-items: center;
}
.titles .text {
  flex: 1;
  width: 0;
  font-size: 18px;
  line-height: 25px;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.titles .text .tags {
  font-size: 13px;
  line-height: 18px;
  color: #999;
  padding: 2px 0;
  display: inline-block;
  word-break: break-all;
  word-wrap: break-word;
}
.row {
  display: flex;
  justify-content: space-between;
  margin: 0 -5px;
}

/* 导航栏的样式 */
.navs-s {
  width: 80px;
  height: 300px;
  // border: 1px solid red;
  position: relative;
}
.navs {
  position: absolute;
  position: fixed;
  top: 100px;
  right: 0;
  width: 80px;
  margin-right: 20px;
  border: 1px solid rgba(193, 191, 191, 0.989);
  background-color: #fff;
  z-index: 100;
}
.navs li {
  padding: 5px 10px;
  line-height: 1.6;
  font-size: 15px;
  color: #000;
}
/* 当导航被点亮后改变颜色 */
.navs .active {
  color: #fff;
  background-color: #67bcf9b7;
}
.navs .Arrow {
  // width: 80px;
  // height: 50px;
  padding: 5px 10px;
  margin-top: 10px;
  padding-left: 30px;
  padding-top: 10px;
  border-top: 1px solid rgba(193, 191, 191, 0.989);
  // background-image: url("./imgs/arrow.png");
}
.Arrow img {
  width: 20px;
  height: 25px;
}
</style>
